
/*
1 发送请求获取数据 渲染页面 - art-template
2 给新增窗口的保存按钮绑定点击事件
3 给编辑按钮绑定点击事件
4 给删除按钮 绑定点击事件 - 隐约感觉到 委托！！

 */
$(function () {
    let id
    function getCategoryList() {
        // 1 发送请求获取数据 渲染页面 - art - template
        $.get('/admin/category/list', function (res) {
            const html = template('triTpl', { list: res.data })
            $('.category_table tbody').html(html)
        })

    }
    getCategoryList()
    // 2 给新增窗口的保存按钮绑定点击事件
    $('#myModal .btn_opt').click(function () {
        const name = $("input[name = 'name']").val().trim()
        const slug = $("input[name = 'slug']").val().trim()
        // 做简单的判定 输入的内容不能为空
        if (!name || !slug) {
            layer.alert('输入的分类名或者类别名不能为空')
            // console.log('执行')
            return
        }
        // 发送请求 实现新增功能
        $.post('/admin/category/add', { name, slug }, function (res) {
            // console.log(res)
            //4 关闭模态框
            $('#myModal').modal('hide')
            // 清空内容
            $("input[name = 'name']").val('')
            $("input[name = 'slug']").val('')
            // 发送请求刷新页面
            getCategoryList()
        })
    })

    // 3 给编辑按钮绑定点击事件
    $('.category_table').on('click', '.edit', function () {
        // console.log('shang执行')
        // 2 获取到需要修改的数据 那一行的数据
        const obj = $(this).parents('tr').data('obj')
        // 3 显示到编辑模态框中
        $('#name').val(obj.name)
        $('#slug').val(obj.slug)
        id = obj.id
    })
    //  4 编辑按钮
    $('#editModal .btn_opt').click(function () {

        // 获取被编辑数据的name slug 和ID
        const name = $("#name").val().trim()
        const slug = $("#slug").val().trim()
        console.log(name, slug)
        // 发送请求给后台 完成更新
        $.post('/admin/category/edit', { id, name, slug }, function (res) {
            $("#editModal").modal("hide")
            getCategoryList()
        })
    })


    // 4 给删除按钮 绑定点击事件 - 隐约感觉到 委托！！
    $('.category_table').on('click', '.delete', function () {
        // 5.1 弹出窗口 询问用户
        // this 当前的按钮 delete   this 指向的问题  this指向谁 看 谁在调用它 ！！

        //   this 问题还有多个解决方法  let that = this 然后下面的this用that代替

        //   把const { id } = $(this).parents('tr').data('obj') 放到弹出窗口点击事件外

        layer.confirm('请确认是否删除', (index) => {
            const { id } = $(this).parents('tr').data('obj')
            $.post('/admin/category/delete', { id }, function (res) {
                getCategoryList()
                layer.close(index)
            })
        })
    })
})